新增項目&刪除項目
<html>
<head>
<meta charset="UTF-8">
<title>新增項目</title>
</head>
<body>
<div id="app">
<!-- v-on:動作 = 事件驅動 -->
<input v-model="newRow" v-on:keyup.enter="addRow">
<ul>
<li v-for="(row,index) in rows">
<span>{{ row.text }}</span>
<!-- 執行函數 $index = array key -->
<button v-on:click="removeRow(index)">X</button>
</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
<!-- 輸入預設字元 -->
newRow: 'Hello ',
<!-- 預設顯示資料 type array -->
rows: [{text: 'Hello World!'},
{text: 'Hello IT Help!'},
{text: 'Hello Eagle'}
]
},
<!-- 函數 -->
methods: {
addRow: function () {
<!-- check text is null if null return 0 -->
var text = this.newRow.trim()
if (text) {
<!-- 新增一筆資料 -->
this.rows.push({text: text})
<!-- 輸入預設字元 -->
this.newRow = 'Hello '
}
},
removeRow: function (index) {
<!-- 使用array key刪除資料 -->
this.rows.splice(index, 1)
}
}
})
</script>
</html>
iThome鐵人賽
看影片追技術